<script setup>
import loading from "../components/loading.vue"
import { onMounted,ref } from 'vue'
import { filterCinemas,getCinemas } from '../api/api'
import cinemasItem from "../components/cinemas-item.vue"
import { cityPinia } from '../stores/home'
import { storeToRefs } from 'pinia'
const cityStore = cityPinia()
const {cityId} = storeToRefs(cityStore)
const cityStoreChange =(id)=>{
  cityStore.$patch(state=>{
    state.cityId = id 
  })
}

let date = new Date()
let y = date.getFullYear()
let m = date.getMonth()+1
let d = date.getDate()
let day = `${y}-${m}-${d}`

const districtId = ref(-1) 
const hallTypeId = ref(-1) 
const brandId = ref(-1) 
const serviceId =ref(-1) 
const clist = ref('')
const areaId = ref(-1)
const getFilter = async (ci)=>{
    let res = await filterCinemas(ci)
    addresses.value = res.district.subItems
    subways.value = res.subway.subItems
    brands.value = res.brand.subItems
    functions.value = res.service.subItems
    hallType.value = res.hallType.subItems
    // console.log(res);
}
const cinemasList = async (ci,day,districtId,hallTypeId,brandId,serviceId,areaId,subwaySubItemId)=>{
    console.log(ci);
    let list = await getCinemas(ci,day,districtId,hallTypeId,brandId,serviceId,areaId,subwaySubItemId)
    // console.log(list);
    clist.value = list
}

// 下拉层
// 全城
const show = ref(false)
const addresses = ref()
// const addressId = ref(-1)
const subItems = ref()
// const subItemId = ref(-1)
const filter = ref('')
const popShow = (f)=>{
    show.value = !show.value
    if(show.value){
        filter.value = f
    }else{
        filter.value = ''
    }
}
const chengeAddressId = (id,index) =>{
    districtId.value = id
    if(id==-1){
        areaId.value = -1
        show.value = false
        cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
        filter.value = ''
    }
    subItems.value = addresses.value[index].subItems
}
const chengeSubItemId = (id) =>{
    areaId.value = id
    show.value = false
    // console.log(cityStore.cityId);
    cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
    filter.value = ''
}

const cityTab = ref('district')
const subways = ref()
const subwayId = ref(-1)
const subwaySubItems = ref()
const subwaySubItemId = ref(-1)
const changeCityTab = (param)=>{
    cityTab.value = param
    // console.log(subways.value);
}
const chengeSubwayId = (id,index)=>{
    subwayId.value = id
    if(id==-1){
        subwaySubItemId.value = -1
        show.value = false
        cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
        filter.value = ''
    }
    subwaySubItems.value = subways.value[index].subItems
}
const chengeSubwaySubItemId = (id)=>{
    subwaySubItemId.value = id
    // console.log(subwaySubItemId.value);
    cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
    show.value = false
    filter.value = ''
}
// 品牌
const brands = ref()
const changeBrandId = (id)=>{
    brandId.value = id
    cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
    show.value = false
    filter.value = ''
}
// 特色
const functions = ref()
const hallType = ref()
const chengeServiceId = (id)=>{
    serviceId.value = id
}
const chengeHallTypeId = (id)=>{
    hallTypeId.value = id
}
const reset = ()=>{
    serviceId.value = -1
    hallTypeId.value = -1
}
const sure = ()=>{
    cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
    show.value = false
    filter.value = ''
}
onMounted(()=>{
    if(cityStore.cityId){
        getFilter(cityStore.cityId)
        cinemasList(cityStore.cityId,day,districtId.value,hallTypeId.value,brandId.value,serviceId.value,areaId.value,subwaySubItemId.value)
    }
})


</script>

<template>
    <div class="option">
        <ul>
            <li @click="popShow('city')" :class="filter==='city'?'active':''">全城
                <van-icon name="arrow-up" v-if="filter==='city'"/>
                <van-icon name="arrow-down" v-else/>
            </li>
            <li @click="popShow('brand')" :class="filter==='brand'?'active':''">品牌
                <van-icon name="arrow-up" v-if="filter==='brand'"/>
                <van-icon name="arrow-down" v-else/>
            </li>
            <li @click="popShow('special')" :class="filter==='special'?'active':''">特色
                <van-icon name="arrow-up" v-if="filter==='special'"/>
                <van-icon name="arrow-down" v-else/>
            </li>
            <!-- {{ grobalCityAdds }} -->
        </ul>
        <div class="pop" v-if="show">
            <div class="contain " v-if="filter=='city'">
                <div class="tab">
                    <div :class="cityTab=='district'?'active':''" @click="changeCityTab('district')">商区</div>
                    <div @click="changeCityTab('subwayTab')" :class="cityTab=='subwayTab'?'active':''">地铁站</div>
                </div>
                <div class="address">
                    <div class="left">
                        <ol class="quxian" v-if="cityTab=='district'">
                            <li v-for="(el,index) in addresses" :key="el.id"
                            :class="el.id===districtId?'active':''" @click="chengeAddressId(el.id,index)">{{ el.name }}({{ el.count }})</li>
                        </ol>
                        <ol class="xianlu" v-if="cityTab=='subwayTab'">
                            <li v-for="(el,index) in subways" :key="el.id"
                            :class="el.id===subwayId?'active':''" @click="chengeSubwayId(el.id,index)">{{ el.name }}({{ el.count }})</li>
                        </ol>
                    </div>
                    <div class="right">
                        <ol v-if="cityTab=='district'">
                            <li v-for="el in subItems" :key="el.id"
                            :class="el.id===areaId?'active':''"
                            @click="chengeSubItemId(el.id)"><span>{{ el.name }}</span><span>{{ el.count }}</span></li>
                        </ol>
                        <ol v-if="cityTab=='subwayTab'">
                            <li v-for="el in subwaySubItems" :key="el.id"
                            :class="el.id===subwaySubItemId?'active':''"
                            @click="chengeSubwaySubItemId(el.id)"><span>{{ el.name }}</span><span>{{ el.count }}</span></li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="contain" v-if="filter=='brand'">
                <ol class="brand">
                    <li v-for="el in brands" :key="el.id" :class="el.id==brandId?'active':''" @click="changeBrandId(el.id)">
                        <span>{{ el.name }}</span>
                        <span>{{ el.count }}</span>
                    </li>
                </ol>
                
            </div>
            <div class="contain" v-if="filter=='special'">
                <div class="special">
                    <div class="function">
                        <div class="title">特色功能</div>
                        <ol>
                            <li v-for="el in functions" :key="el.id" :class="serviceId==el.id?'active':''" @click="chengeServiceId(el.id)">{{ el.name }}</li>
                        </ol>
                    </div>
                    <div class="hallType">
                        <div class="title">特殊厅</div>
                        <ol>
                            <li v-for="el in hallType" :key="el.id" :class="hallTypeId==el.id?'active':''" @click="chengeHallTypeId(el.id)">{{ el.name }}</li>
                        </ol>
                    </div>
                    
                </div>
                <div class="btns">
                        <button class="reset" @click="reset">重置</button>
                        <button class="sure" @click="sure">确定</button>
                    </div>
            </div>
            <div class="mask"></div>
        </div>
    </div>
    <div class="content">
        <loading v-if="!clist"></loading>
        <cinemasItem v-for="(el,index) in clist" :key="index" :info="el"></cinemasItem>
    </div>
    
</template>

<style lang="scss" scoped>
.option{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 111px;
    width: 100%;
    background-color: #fff;
    z-index: 2023;
    ul{
        border-bottom: 1px #e8e8e8 solid;
        width: 90%;
        display: flex;
        li{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            font-size: 14px;
            color: #777;
            &:nth-child(2){
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    display: block;
                    height: 25px;
                    width: 1px;
                    background-color: #e8e8e8;
                    right: 0;
                }
                &::before{
                    content: '';
                    position: absolute;
                    display: block;
                    height: 25px;
                    width: 1px;
                    background-color: #e8e8e8;
                    left: 0;
                }
            }
            &.active{
                color: #f03d37;
            }
        }
    }
    .pop{
        width: 100%;
        position: relative;
        .contain{
            background-color: #fff;
            .tab{
                display: flex;
                width: 100%;
                height: 44px;
                div{
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    &.active{
                        color: #f03d37;
                        position: relative;
                        &::after{
                            content: '';
                            display: block;
                            width: 100%;
                            height: 2px;
                            background-color: #f03d37;
                            position: absolute;
                            bottom: 0;
                        }
                    }
                }
            }
            .address{
                display: flex;
                .left{
                    width: 40%;
                    overflow: hidden;
                    background-color: #fff;
                    ol{
                        width: 100%;
                        max-height: 380px;
                        overflow: auto;
                        padding-right: 10px;
                        li{
                            height: 44px;
                            // width: 100%;
                            line-height: 44px;
                            padding-left: 20px;
                            color: #777;
                            font-size: 14px;
                            &.active{
                                color: #f03d37;
                                background-color: #f5f5f5;
                            }
                        }
                    }
                }
                .right{
                    background-color: #f5f5f5;
                    flex: 1;
                    overflow: hidden;
                    ol{
                        width: 100%;
                        max-height: 380px;
                        overflow: auto;
                        padding-right: 10px;
                        li{
                            height: 44px;
                            line-height: 44px;
                            padding-left: 20px;
                            color: #777;
                            font-size: 14px;
                            display: flex;
                            justify-content: space-between;
                            // padding-right: 10px;
                            &.active{
                                color: #f03d37;
                                background-color: #f5f5f5;
                            }
                        }
                    }
                }
            }
            .brand{
                max-height: 380px;
                overflow-y: auto;
                li{
                    border-bottom: 1px solid #e8e8e8;
                    padding: 15px;
                    display: flex;
                    justify-content: space-between;
                    &.active{
                        color: #f03d37;
                    }
                }
            }
            .special{
                padding: 15px;
                border-bottom: 1px solid #eee;
                .title{
                    color: #777;
                }
                ol{
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 20%;
                        background-color: #fff;
                        color: #777;
                        font-size: 12px;
                        margin-top: 10px;
                        border: 1.5px solid #ccc;
                        padding: 12px 2px;
                        text-align: center;
                        border-radius: 8px;
                        margin-left: 15px;
                        flex-shrink:0;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        &:nth-child(4n+1){
                            margin-left: 0;
                        }
                        &.active{
                            background-color: #fcf0f0;
                            color: #f03d37;
                            border: 1.5px solid #f03d37;
                        }
                    }
                }
                .hallType{
                    margin-top: 15px;
                }
                
            }
            .btns{
                background-color: #fafafa;
                height: 60px;
                display: flex;
                padding: 0 15px;
                align-items: center;
                justify-content: space-between;
                button{
                    outline: none;
                    padding: 8px 20px;
                    border-radius: 7px;
                }
                .reset{
                    color: #777;
                    background-color: #fafafa;
                    border: 1px solid #ddd;
                }
                .sure{
                    color: #fff;
                    background-color: #f03d37;
                    border: 1px solid #f03d37;
                }

            }
        }
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #000000, $alpha: 0.6);
        }
    }
}
.content{
    padding: 10px;
    margin: 50px 0;
}
</style>